<script setup>
import { ref } from 'vue'
const list = ref([
  { id: 1, name: '吃饭' },
  { id: 2, name: '睡觉' },
  { id: 3, name: '写代码' }
])
const context = ref('')
const addItem = () => {
  list.value.push({
    id: list.value.length > 0 ? list.value.length + 1 : 1,
    name: context.value
  })
  context.value = ''
}
const del = (id) => {
  console.log(id);
  list.value = list.value.filter(item => item.id !== id)
}
</script>

<template>
  <div>
    <div>
      <input v-model="context" type="text"> <button @click="addItem">添加</button>
    </div>

    <table border="">
      <thead>
        <th>标识</th>
        <th>待办事项</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <a @click.prevent="del(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>